<template>
  <div style="border: 3px dashed darkgray">
    <el-row>
      <el-col :span="24" style="background-color: papayawhip;height: 50px;border: 2px dashed darkgray" ><div>
        <th style="padding-top: 15px;padding-left: 10px">我的购物车</th>
      </div></el-col>
    </el-row>
    <el-row style="background-color: white">
      <el-table :data="list"   @selection-change="handleSelectionChange " style=" height: 100%;width: 100%;background-color: papayawhip;border: 2px dashed darkgray"  :stripe="true"  >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="编号" width="180" sortable v-if="false"></el-table-column>
        <el-table-column prop="book" label="编号1" width="180" sortable v-if="false"></el-table-column>
        <el-table-column prop="name" label="书名" width="180"></el-table-column>
        <el-table-column prop="number" label="数量" width="180"></el-table-column>
        <el-table-column prop="price" label="单价" width="180"></el-table-column>
        <el-table-column prop="cxk" label="活动价" width="180">
<!--          <span  v-if="cxk==undefined">暂无活动</span>-->
<!--          <span  v-if="cxk!=undefined">{{cxk}}</span>-->
        </el-table-column>
        <el-table-column prop="total" label="总价" width="180"></el-table-column>
        <el-table-column prop="activity" label="活动编号" width="180" sortable v-if="false"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      <div>
        <div>
          <li>共<span>{{ list.length }}</span>件商品，已选择<span>{{ multipleSelection.length }}</span>件</li>
        </div>
        <div>
          <div>合计(不含运费):<span>{{ sum }}元</span></div>
          <el-button  @click="dialogFormVisible=true;">去支付</el-button>
        </div>
      </div>
      <el-dialog title="购买信息" :visible.sync="dialogFormVisible">
        <el-form :model="list">
          <el-form-item label="用户编号" hidden>
            <el-input v-model="list.fuser=this.$store.state.user.list.id" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="快递单号" hidden>
            <el-input v-model="list.parcelid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" hidden>
            <el-input v-model="list.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="总金额">
            <el-input v-model="list.price=this.sum" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="支付时间" hidden>
            <el-input v-model="list.date" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单数量" hidden >
            <el-input v-model="list.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单状态" hidden >
            <el-input v-model="list.state=0" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="支付宝订单编号" hidden >
            <el-input v-model="list.out_trade_no" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收货时间" hidden>
            <el-input v-model="list.datetime" autocomplete="off"></el-input>
          </el-form-item>
<!--          <el-form-item label="编号">-->
<!--            <el-input v-model="list.ac" autocomplete="off"></el-input>-->
<!--          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add()"><router-link :to="{name:'Forder'}">确定</router-link></el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import App from "../App";
export default {
  name: "Cart",
  components: {App},
  data() {
    let ids = [];
    let activity1=[];
    let number1=[];
    let bid=[];
    return {
      list: {
        activity1,
        ids,
        number1,
        bid,
        id:'',
        name:'',
        number:'',
        price:'',
        total:'',
        activity:''
      },
      id: '',
      multipleSelection: [],
      sum: 0,
      dialogFormVisible: false,
    }
  },
  created() {
    let a = this.$store.state.user.list
    console.log(a)
    if (a != null) {
      this.name = this.$store.state.user.list.username
    }
    this.id = this.$store.state.user.list.id
    console.log("用户id" + this.id)
    this.$http.post('/fcart/selectall', {fuser: this.id}).then(data => {
      this.list = data
      console.log(data)
    });
  },
  methods: {
    getList() {
      this.$http.post('/fcart/selectall', {fuser: this.id}).then(data => {
        this.list = data
        console.log(data)
      })
    },
    del(row) {
      this.$http.post('/fcart/del', {id: row.id}).then(data => {
        this.$message.success('删除成功')
        this.getList()
      })
    }, search() {
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //将选中的行存储入变量
      this.sum = 0;
      this.ids = [];
      this.activity1=[];
      this.number1=[];
      this.bid=[];
      for (let i = 0; i < val.length; i++) {
        this.activity1.splice(i,0,val[i].activity);
        this.ids.splice(i,0,val[i].id);
        this.number1.splice(i,0,val[i].number);
        this.bid.splice(i,0,val[i].book);
        this.sum += val[i].total
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // add() {
    //   this.dialogFormVisible = false
    //   this.$http.post('/forder/fadd', {
    //     fuser: this.fuser,
    //     parcelid: this.list.parcelid,
    //     time: this.list.time,
    //     price: this.total,
    //     date: this.list.date,
    //     fsite: this.list.fsite,
    //     state: this.list.state,
    //     datetime: this.list.datetime,
    //     outtradeno: this.list.outtradeno
    //   }).then(data => {
    //     this.$http.post('/forder/update', {fuser: this.fuser, id: this.list.id})
    //     this.$message.success('操作成功')
    //     this.getList()
    //   })
    // }
    add() {
       //alert(this.activity1[0])
      this.dialogFormVisible = false
       if(this.activity1[0] == null){
      this.$http.post('/forder/fadd', {
        fuser: this.id, parcelid: this.list.parcelid,
        time: this.list.time,
        price: this.sum,
            date: this.list.date,
            fsite: this.list.fsite,
            state: this.list.state,
            datetime: this.list.datetime,
        outtradeno: this.list.out_trade_no,
        book:this.bid[0],
        number:this.number1[0]
      }).then(data => {
        this.$http.post('/forder/max').then(data => {
          this.bian = data
          // this.$http.post('/forderp/add',{book:})
          console.log(data)
          this.$message.success('购买成功')
          this.getList()
          this.$http.post('/fcart/del', {id: this.ids[0]}).then(data => {
            // this.$message.success('删除成功')
            this.getList()
          })
        })
      })
    }else {
         this.$http.post('/forder/fadd1', {
           fuser: this.id, parcelid: this.list.parcelid,
           time: this.list.time,
           price: this.sum,
           date: this.list.date,
           fsite: this.list.fsite,
           state: this.list.state,
           datetime: this.list.datetime,
           outtradeno: this.list.out_trade_no,
           aid:this.activity1[0],
           number:this.number1[0]
         }).then(data => {
           this.$http.post('/forder/max').then(data => {
             this.bian = data
             // this.$http.post('/forderp/add',{book:})
             console.log(data)
             this.$message.success('购买成功')
             this.getList()
             this.$http.post('/fcart/del', {id: this.ids[0]}).then(data => {
               // this.$message.success('')
               this.getList()
             })
           })
         })
       }
    }
  }
}
</script>

<style scoped>

.el-row {
  margin-bottom: 20px;}
:last-child {
  margin-bottom: 0;
}

</style>

